import React, {Component} from 'react'
import {connect} from 'react-redux'
import {NavBar,InputItem,Button,TextareaItem} from 'antd-mobile'
import PropTypes from 'prop-types'
import {Redirect} from 'react-router-dom'

import HeaderSelector from "../../components/header-selector/header-selector";
import {update} from "../../redux/actions";

class MengXinInfo extends Component {

  state = {
    header:'',
    post:'',
    info:'',
  };

  static propTypes = {
    update:PropTypes.func.isRequired
  };

  handleChange = (name, val) => {
    // 更新对应状态
    this.setState({
      [name]: val
    })
  };

  save = () => {
    this.props.update(this.state);
  };

  setHeader = (header) => {
    this.setState({
      header
    })
  };

  render() {

    const {type,header} = this.props.user;

    if(header){   //说明信息已经完善
      const path = type === '萌新' ? '/mengxin' : '/boss';
      return <Redirect to={path}/>
    }

    return(
        <div>
          <NavBar>萌新信息完善</NavBar>
          <HeaderSelector setHeader={this.setHeader}/>
          <InputItem placeholder='请输入求职岗位' onChange={val => {
            this.handleChange('post', val)
          }}>求职岗位：</InputItem>
          <TextareaItem placeholder='请输入个人介绍' title="个人介绍" rows={3} onChange={val => {
            this.handleChange('info', val)
          }}/>
          <Button type='primary' onClick={this.save}>保存</Button>
        </div>
    )
  }
}

export default connect(
    state => ({user:state.user}),
    {update}
)(MengXinInfo)